<script setup lang="ts">
import CateRankId from "~/contentScripts/views/sycm/market_monitor/cateRankId.vue";
import SYCM from "~/utils/ali/sycm";
import {SycmFindIndex} from "~/utils/ali/SycmIndexMap";
import Trans from "~/utils/sycm/trans";

const emit = defineEmits([
  "update:visible",
  "pause",
]);
const close = () => {
  emit("update:visible", false);
};
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const spinning = ref(false);
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const getDateType = async () => {
  return await SYCM.getInternalFiberData('.ebase-FaCommonFilter-module__item-date', 'memoizedProps.children.props.dateType');
}
const loadDataSource = async () => {
  return await SYCM.getInternalFiberData(`#sycm-mc-mq-my-monitor-brand div.oui-table-wrapper`, 'memoizedProps.children[0].props.dataSource');
}
const modalWidth = ref('95%');
const calcData = async () => {
  spinning.value = true;
  let _data = await loadDataSource();
  let dateType = await getDateType();
  if (dateType === 'today') {
    modalWidth.value = '700px';
    columns.value = [
      {
        dataIndex: 'brandModel.brandName',
        dataType: 'custom',
        title: '品牌',
        slot: 'brand',
        // fixed: 'left',
        width: 140,
      },
      {
        dataIndex: 'cateRankId.value',
        // fixed: 'left',
        align: 'center',
        dataType: 'custom',
        slot: 'cateRank',
        title: SycmFindIndex('cateRankId')?.text || '行业排行',
        sorter: (a: { cateRankId: { value: number; }; }, b: { cateRankId: { value: number; }; }) => {
          try {
            return a.cateRankId.value - b.cateRankId.value;
          } catch (e) {
            if (typeof a.cateRankId == "undefined" && b.cateRankId == "undefined") {
              return 0;
            }
            if (typeof a.cateRankId == "undefined") {
              return 1;
            } else {
              return -1;
            }
          }
        },
        width: 120,
      },
      {
        dataIndex: 'tradeAmount',
        title: '交易金额',
        align: 'center',
        width: 120,
        sorter: (a: { tradeAmount: number; }, b: { tradeAmount: number; }) => a.tradeAmount - b.tradeAmount,
      },
      // {
      //   dataIndex: 'uv',
      //   title: '访客数',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { uv: number; }, b: { uv: number; }) => a.uv - b.uv,
      // },
      // {
      //   dataIndex: 'seIpvUv',
      //   title: '搜索人数',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { seIpvUv: number; }, b: { seIpvUv: number; }) => a.seIpvUv - b.seIpvUv,
      // },
      // {
      //   dataIndex: 'clt',
      //   title: '收藏人数',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { clt: number; }, b: { clt: number; }) => a.clt - b.clt,
      // },
      // {
      //   dataIndex: 'cart',
      //   title: '加购人数',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { cart: number; }, b: { cart: number; }) => a.cart - b.cart,
      // },
      // {
      //   dataIndex: 'payRate',
      //   title: '支付转化率',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { payRate: string; }, b: { payRate: string; }) => parseInt(a.payRate) - parseInt(b.payRate),
      // },
      // {
      //   dataIndex: 'seRate',
      //   title: '搜索占比',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { seRate: string; }, b: { seRate: string; }) => parseFloat(a.seRate) - parseFloat(b.seRate),
      // },
      // {
      //   dataIndex: 'cltRate',
      //   title: '收藏率',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { cltRate: string; }, b: { cltRate: string; }) => parseFloat(a.cltRate) - parseFloat(b.cltRate),
      // },
      // {
      //   dataIndex: 'cartCltRate',
      //   title: '加购收藏率',
      //   align: 'center',
      //   width: 120,
      //   sorter: (a: { cartCltRate: string; }, b: {
      //     cartCltRate: string;
      //   }) => parseFloat(a.cartCltRate) - parseFloat(b.cartCltRate),
      // },
      // {
      //   dataIndex: 'uvAmount',
      //   title: 'UV价值',
      //   align: 'center',
      //   width: 120,
      //   fixed: 'right',
      //   sorter: (a: { uvAmount: number; }, b: { uvAmount: number; }) => (a.uvAmount) - (b.uvAmount),
      // },
      // {
      //   dataIndex: 'payUserNumber',
      //   title: '支付买家数',
      //   align: 'center',
      //   width: 120,
      //   fixed: 'right',
      //   sorter: (a: { payUserNumber: number; }, b: { payUserNumber: number; }) => a.payUserNumber - b.payUserNumber,
      // },
      // {
      //   dataIndex: 'customerUnitPrice',
      //   title: '客单价',
      //   align: 'center',
      //   width: 120,
      //   fixed: 'right',
      //   sorter: (a: { customerUnitPrice: number; }, b: {
      //     customerUnitPrice: number;
      //   }) => a.customerUnitPrice - b.customerUnitPrice,
      // },
    ];
  } else {
    modalWidth.value = '95%';
    columns.value = [
      {
        dataIndex: 'brandModel.brandName',
        dataType: 'custom',
        title: '品牌',
        slot: 'brand',
        fixed: 'left',
        width: 140,
      },
      {
        dataIndex: 'cateRankId.value',
        fixed: 'left',
        align: 'center',
        dataType: 'custom',
        slot: 'cateRank',
        title: SycmFindIndex('cateRankId')?.text || '行业排行',
        sorter: (a: { cateRankId: { value: number; }; }, b: { cateRankId: { value: number; }; }) => {
          try {
            return a.cateRankId.value - b.cateRankId.value;
          } catch (e) {
            if (typeof a.cateRankId == "undefined" && b.cateRankId == "undefined") {
              return 0;
            }
            if (typeof a.cateRankId == "undefined") {
              return 1;
            } else {
              return -1;
            }
          }
        },
        width: 120,
      },
      {
        dataIndex: 'tradeAmount',
        title: '交易金额',
        align: 'center',
        width: 120,
        sorter: (a: { tradeAmount: number; }, b: { tradeAmount: number; }) => a.tradeAmount - b.tradeAmount,
      },
      {
        dataIndex: 'uv',
        title: '访客数',
        align: 'center',
        width: 120,
        sorter: (a: { uv: number; }, b: { uv: number; }) => a.uv - b.uv,
      },
      {
        dataIndex: 'seIpvUv',
        title: '搜索人数',
        align: 'center',
        width: 120,
        sorter: (a: { seIpvUv: number; }, b: { seIpvUv: number; }) => a.seIpvUv - b.seIpvUv,
      },
      {
        dataIndex: 'clt',
        title: '收藏人数',
        align: 'center',
        width: 120,
        sorter: (a: { clt: number; }, b: { clt: number; }) => a.clt - b.clt,
      },
      {
        dataIndex: 'cart',
        title: '加购人数',
        align: 'center',
        width: 120,
        sorter: (a: { cart: number; }, b: { cart: number; }) => a.cart - b.cart,
      },
      {
        dataIndex: 'payRate',
        title: '支付转化率',
        align: 'center',
        width: 120,
        sorter: (a: { payRate: string; }, b: { payRate: string; }) => parseInt(a.payRate) - parseInt(b.payRate),
      },
      {
        dataIndex: 'seRate',
        title: '搜索占比',
        align: 'center',
        width: 120,
        sorter: (a: { seRate: string; }, b: { seRate: string; }) => parseFloat(a.seRate) - parseFloat(b.seRate),
      },
      {
        dataIndex: 'cltRate',
        title: '收藏率',
        align: 'center',
        width: 120,
        sorter: (a: { cltRate: string; }, b: { cltRate: string; }) => parseFloat(a.cltRate) - parseFloat(b.cltRate),
      },
      {
        dataIndex: 'cartCltRate',
        title: '加购收藏率',
        align: 'center',
        width: 120,
        sorter: (a: { cartCltRate: string; }, b: {
          cartCltRate: string;
        }) => parseFloat(a.cartCltRate) - parseFloat(b.cartCltRate),
      },
      {
        dataIndex: 'uvAmount',
        title: 'UV价值',
        align: 'center',
        width: 120,
        fixed: 'right',
        sorter: (a: { uvAmount: number; }, b: { uvAmount: number; }) => (a.uvAmount) - (b.uvAmount),
      },
      {
        dataIndex: 'payUserNumber',
        title: '支付买家数',
        align: 'center',
        width: 120,
        fixed: 'right',
        sorter: (a: { payUserNumber: number; }, b: { payUserNumber: number; }) => a.payUserNumber - b.payUserNumber,
      },
      {
        dataIndex: 'customerUnitPrice',
        title: '客单价',
        align: 'center',
        width: 120,
        fixed: 'right',
        sorter: (a: { customerUnitPrice: number; }, b: {
          customerUnitPrice: number;
        }) => a.customerUnitPrice - b.customerUnitPrice,
      },
    ];
  }
  // 注入数据
  SYCM.assignData(_data);
  dataSource.value = _data;
  spinning.value = false;
}
watch(() => props.visible, (val) => {
  if (val) {
    spinning.value = true;
    calcData();
  }
})
</script>

<template>
  <custom-modal :visible="visible" title="市场-监控看板-品牌" :footer="false" :width="modalWidth" style="top: 20px;"
           @cancel="close"
  >
<!--    <template #headerRight>-->
<!--      <SYCMCustomModalHeaderNotice/>-->
<!--    </template>-->
    <a-spin :spinning="spinning">

      <div style="max-height: calc(100vh - 150px);overflow-y: auto">
        <base-table table-name="市场-监控看板-品牌" :data-source="dataSource" size="small" :columns="columns">
          <template #brand="row">
            <div class="sycm-common-shop-td" :title="row.brandModel.brandName" style="width: 260px;"><span
                class="sycm-common-shop-td-img-wrapper" style="width: 36px; height: 36px;"
            ><img :src="`//img.alicdn.com/tps/${row.brandModel.logo}_48x48.jpg`"></span><span
                class="sycm-common-shop-td-title-wrapper titleWrapper" style="height: 36px;"
            ><span class="shopName"><span style="max-width: 194px;">{{ row.brandModel.brandName }}</span></span></span>
            </div>
          </template>
          <template #cateRank="row">
            <cate-rank-id :record="row"/>
          </template>
        </base-table>
      </div>
    </a-spin>
  </custom-modal>
</template>

<style scoped>

</style>
